@import (less) "UICONST.css";

.ui-tip .tip-success {
    background: rgba(58, 183, 106, 0.70);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B23AB76A,endColorstr=#B23AB76A)";
}

.ui-tip .tip-error {
    background: rgba(213, 18, 0, 0.70);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2D51200,endColorstr=#B2D51200)";
}
.ui-tip .tip-error,
.ui-tip .tip-success,
.ui-tip .tip-warn {
    /*background: rgba(43, 43, 59, 0.95);*/
    background: #333;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E52B2B3B,endColorstr=#E52B2B3B)";
    padding: px2rem(16px) px2rem(32px);
}
.ui-tip > div {
    text-align: center;
    line-height: px2rem(44px);
    min-width: 0;
    color: #FFFFFF;
    font-size: px2rem(30px);
    word-break: break-all;
}
/* 隐藏滚动条 */
.flex() {
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
    display: -moz-box; /* Firefox 17- */  
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
    display: -moz-flex; /* Firefox 18+ */  
    display: -ms-flexbox; /* IE 10 */  
    display: flex;
}
.flex-middle() {
    align-items: center;
    -webkit-align-items: center;
}
.form-content() {
    font-size: px2rem(26px);
    color: #333;
    font-weight: 500;
}

::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar {
    display: none;
}

/*骨架屏 - 样式*/
.loading {

    .brand,
    .series,
    .price,
    .img-vr-warp,
    .config .panel-item,
    .name,
    .price,
    .desc,
    .question-btn {
        /*background: #4F5566;
        opacity: 0.19;*/
        background: rgba(79, 85, 102, .19);
        margin: 0 !important;
        padding: 0 !important;
        margin-left: px2rem(40px) !important;
    }

    .brand-series {
        height: auto;
    }

    .brand {
        width: px2rem(440px);
        height: px2rem(44px);
        margin-bottom: px2rem(38px) !important;
    }

    .series {
        width: px2rem(500px);
        height: px2rem(44px);
        margin-bottom: px2rem(38px) !important;
    }

    .price {
        width: px2rem(196px) !important;
        height: px2rem(72px) !important;
    }

    .img-vr-warp {
        width: px2rem(670px);
        height: px2rem(358px);
        border-radius: px2rem(22px);
        margin-top: px2rem(52px) !important;
    }

    .config {
        left: 0;
        margin-top: px2rem(52px) !important;

        .panel-item {
            width: px2rem(200px);
            height: px2rem(146px);
            border-radius: px2rem(24px);
        }

        .panel-item:before {
            display: none;
            content: '';
        }
    }

    .question-btn {
        width: px2rem(170px) !important;
        height: px2rem(74px) !important;
        background: rgba(79, 85, 102, .19) !important;
        margin: 0 auto !important;
    }
}

/*骨架屏 - 紧凑型风格（style-compact）- 样式*/
.loading.style-compact {

    .seize-seat-item {
        background: #DEDFE1;
        margin: 0 !important;
        padding: 0 !important;
        margin: px2rem(30px) px2rem(40px) 0 !important;
        border-radius: px2rem(2px);
    }

    .img-seat {
        width: 100%;
        height: px2rem(422px);
        margin: 0 !important;
        border-radius: 0;
    }

    .width-388 {
        width: px2rem(388px);
    }

    .width-256 {
        width: px2rem(256px);
    }

    .height-40 {
        height: px2rem(40px);
    }

    .height-82 {
        height: px2rem(82px);
    }

    .seize-seat-item.left {}

    .seize-seat-item.center {
        margin-left: auto !important;
        margin-right: auto !important;
    }

}


html,
body {
    position: relative;
    font-family: Fangzheng;
    overflow: hidden;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    /* 阻止ios设置字体大小 */
    /* -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important; */
    font-size: px2rem(24px);
    #ECUI-FIXED-BODY {
        font-size: px2rem(28px);
    }
    .app-container {
        height: 100%;
        width: 100%;
        .content-wrap {
            height: 100%;
            width: 100%;

            >div {
                height: 100%;
                width: 100%;
                overflow: auto;
            }
        }
    }
}
.body-panel.ui-mobile-panel {
    height: 100%;
    overflow: hidden;
}
.panel-blank-item {
    height: px2rem(1px);
}
.module-tag  {
    overflow: hidden;
}
.iframe-mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    /* opacity: 0.5; */
}
.ui-h-swipper {
    height: px2rem(600px);
    width: 100%;
    font-size: 0;
    .ui-mobile-panel-body {
        white-space: nowrap;
        height: 100%;
        width: 100%;
        .ui-item {
            display: inline-block;
            height: 100%;
            width: 100%;
            font-size: px2rem(28px);
        }
    }
}
.align-item() {
    -webkit-align-items: center;
    align-items: center;
}
.just-count() {
    -webkit-justify-content: center;
    justify-content: center;
}

.select-city {
    width: px2rem(450px);
    height: 100%;
    position: fixed;
    top: 0;
    right: px2rem(-450px);
    background-color: #fff;
    z-index: 999999999;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all 0.3s;
    font-size: px2rem(28px);
    ul {
        width: px2rem(450px);
        li{
            width: px2rem(400px);
            padding: 0 px2rem(50px);
            
            div {
                width: px2rem(350px);
                height: px2rem(70px);
                border-bottom: 1px solid #ccc;
                display: block;
                line-height: px2rem(70px);
                .flex();
                justify-content: space-between;
                -webkit-justify-content: space-between;
                .align-item();
                color: #000000;
                img {
                    width: px2rem(30px);
                    height: px2rem(15px);
                    color: #333;
                }
            }
        }
    }
} 
#select-detail-city {
    width: px2rem(250px);
    height: 100%;
    position: fixed;
    top: 0;
    right: px2rem(-250px);
    transition: all 0.2s;
    background-color: #eee;
    z-index: 9999999999999;
    overflow: auto;
    font-size: px2rem(28px);
    ul {
        width: px2rem(250px);
        li{
            width: px2rem(250px);
            padding: 0 px2rem(50px);
            a {
                width: px2rem(150px);
                height: px2rem(70px);
                border-bottom: 1px solid #fff;
                display: block;
                line-height: px2rem(70px);
                .flex();
                justify-content: space-between;
                -webkit-justify-content: space-between;
                .align-item();
                color: #000000;
            }
        }
    }
}

.region-selection,
.newNavigation {
    // width: px2rem(750px);
    height: px2rem(80px);
    position: relative;
    display: block;
}

.region-selection {
    clear: both;
    background-color: #fff;
   
    z-index: 999;

    .left-select {
        height: px2rem(80px);
        width: px2rem(170px);
        .flex();
        justify-content: space-around;
        -webkit-justify-content: space-around;
        .align-item();
        span {
            font-size: px2rem(28px);
        }

        .right-circle {
            width: 0px;
            height: 0px;
            border-top: px2rem(10px) solid #000000;
            border-left: px2rem(10px) solid transparent;
            border-right: px2rem(10px) solid transparent;
        }
    }

    .search-put {
        width: px2rem(460px);
        height: px2rem(54px);
        background-color: #eee;
        margin-top: px2rem(15px);

        .search-item {
            height: 100%;
            width: 100%;
            position: relative;

            img {
                height: px2rem(30px);
                width: px2rem(30px);
                position: absolute;
                left: px2rem(15px);
                top: px2rem(15px);
                ;
            }

            .plator {
                padding-left: px2rem(20px);
                height: px2rem(54px);
                width: px2rem(430px);
                line-height: px2rem(54px);
                text-align: center;
                font-size: px2rem(28px);
            }
        }
    }

    .select-btn {
        height: px2rem(80px);
        width: px2rem(120px);
        img {
            width: px2rem(38px);
            height: px2rem(30px);
        }
        #closeBtn {
            width: px2rem(28px);
        }

    }

    .right-navigation-old,
    .right-navigation {
        width: px2rem(200px);
        background-color: #eee;
        display: block;
        position: absolute;
        top: px2rem(80px);
        right: px2rem(20px);
        .top-triangle {
            width: 0;
            height: 0;
            border-width: px2rem(15px);
            border-style: solid;
            border-color: transparent transparent #eee transparent;
            position: absolute;
            top: px2rem(-25px);
            right: px2rem(15px);
            display: block;
            z-index: 999;
        }
        dd {
            width: px2rem(160px);
            height: px2rem(70px);
            line-height: px2rem(70px);

            a {
                color: #333;
                // display: block;
                height: px2rem(70px);
                box-sizing: border-box;
                font-size: px2rem(28px);
                white-space: nowrap;
                &:active {
                    color: #3366ff;
                }
            }
        }
    }

    .right-navigation-old {
        z-index: 99999;
        text-align: center;
        height: px2rem(630px);

        dd {
            padding: 0 px2rem(20px);
            a {
                width: 90%;
            }

        }
    }

    .right-navigation {
        z-index: 99999;
        height: px2rem(700px);

        dd {
            text-align: center;

            a {
                width: 100%;
            }
        }
    }
}

.flex-center {
    .flex();
    .align-item();
    .just-count();
    
}

.fll {
    float: left;
}
.newNavigation {
    background-color: #3366ff;
    z-index: 99999999;

    a.brand-title {
        position: absolute;
        left: px2rem(15px);
        top: px2rem(14px);
        width: px2rem(630px);
        height: px2rem(50px);
        line-height: px2rem(50px);
        color: #8492a6;
        font-size: px2rem(24px);
        background: #fff;
        text-align: center;
        border-radius: px2rem(50px);
        /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 px2rem(1px) px2rem(6px) rgba(0, 0, 0, 0.45) inset;*/
        border: none;
        input {
            display: none;
        }
    }
    input {
        width: px2rem(630px);
        height: px2rem(50px);
        position: absolute;
        left: px2rem(15px);
        top: px2rem(14px);
        // text-indent: px2rem(100px);
        border-radius: px2rem(50px);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 px2rem(1px) px2rem(6px) rgba(0, 0, 0, 0.45) inset;
        border: none;
    }

    input:focus {
        outline-width: 0
    }
    input::-ms-input-placeholder{
        text-align: center;
    }
    input::-webkit-input-placeholder{
        text-align: center;
    }
    .close-search {
        width: px2rem(100px);
        height: px2rem(80px);
        position: absolute;
        top: 0;
        right: 0;

        img {
            width: px2rem(38px);
            color: #fff;
            position: absolute;
            top: px2rem(25px);
            right: px2rem(30px);
        }
        #closeBtn {
            width: px2rem(30px);
            height: px2rem(30px);
            color: #fff;
            position: absolute;
            top: px2rem(25px);
            right: px2rem(30px);
        }
    }

    .right-navigation {
        width: px2rem(200px);
        height: px2rem(420px);
        background-color: #eee;
        display: block;
        z-index: 99999;
        position: absolute;
        top: px2rem(80px);
        right: px2rem(20px);

        .top-triangle {
            width: 0;
            height: 0;
            border-width: px2rem(15px);
            border-style: solid;
            border-color: transparent transparent #eee transparent;
            position: absolute;
            top: px2rem(-25px);
            right: px2rem(15px);
            display: block;
            z-index: 999;
        }

        dd {
            width: px2rem(200px);
            height: px2rem(70px);
            line-height: px2rem(70px);
            text-align: center;

            a {
                color: #333;
                display: block;
                width: 100%;
                height: px2rem(70px);
                box-sizing: border-box;
                font-size: px2rem(28px);
                &:active {
                    color: #3366ff;
                }
            }
        }
    }
    
}

.ui-v-auto-swipper {
    overflow: hidden !important;
    position: relative;
    .ui-v-auto-swipper-body {
        position: absolute;
    }
}
.new-mask {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: px2rem(80px);
    left: 0;
    display: block;
    user-select: none;
    height: px2rem(1255px);
    // bottom: 0;
    width: 100%;
}


.ui-dialog {
    border-radius: px2rem(15px);
    background: none;

    .ui-dialog-title {
        height: auto;
        padding: 0;
        background: #ffffff;
    }
    .close,
    .ui-dialog-close {
        position: absolute;
        left: 50%;
        top: unset;
        bottom: 0;
        margin: 0 auto 0 -px2rem(40px);
        background: url('images/group/close.png') no-repeat center center;
        background-size: px2rem(80px) px2rem(80px);
        width: px2rem(80px);
        height: px2rem(80px);
        
    }
}

/* 公共样式 begin */

.ui-text {
    border: none !important;

    input,
    textarea {
        font-size: px2rem(32px);
    }
}

/* 留资dialog样式 */
.ui-dialog.ui-group-dialog,
.collect-user-info, .drive-collect-info {
    /*width: px2rem(600px);*/
    /*// height: px2rem(644px);*/
    border-radius: px2rem(15px);
    padding-bottom: px2rem(-120px);
    background: none;

    .ui-dialog-title {
        height: auto;
        padding: 0;
        background: #ffffff;
    }
    .brand-bg {
        background: url('images/group/logo_bg.png') no-repeat top center;
        background-size: px2rem(610px) px2rem(125px);
        width: px2rem(610px);
        height: px2rem(125px);
        line-height: px2rem(125px);
        text-align: center;
        margin-bottom: px2rem(46px);
        img {
            width: px2rem(140px);
            height: auto;
        }
        span {
            font-size: px2rem(46px);
            color: #370404;
        }
    }
    .close,
    .ui-dialog-close {
        position: absolute;
        left: 50%;
        top: unset;
        bottom: 0;
        margin: 0 auto 0 -px2rem(40px);
        background: url('images/group/close.png') no-repeat center center;
        background-size: px2rem(80px) px2rem(80px);
        width: px2rem(80px);
        height: px2rem(80px);
        
    }
    .ui-dialog-body {
        background-color: #ffffff;
        padding: px2rem(46px) px2rem(25px) px2rem(45px) px2rem(25px);
        background: #fff;
        background-size: 100% auto;

        .title {
            font-size: px2rem(36px);
            letter-spacing: 2px;
            line-height: px2rem(40px);
            color: #e71a1b;
            font-weight: bold;
            text-align: center;
        }

        .info-tip {
            text-align: center;
            font-size: px2rem(20px);
            color: #370404;
            margin: px2rem(30px) 0;
        }

        .info-tip-bottom {
            margin-top: px2rem(10px);

        }

        .prize-items {
            padding: 0 px2rem(40px);
            text-align: center;

            .prize-item {
                display: block;
                width: auto;
                height: auto;
                font-size: px2rem(24px);
                color: #e71a1b;
                padding-left: px2rem(40px);
                background: url('images/group/radio-unchecked.png') center left no-repeat;
                background-size: px2rem(30px) px2rem(30px);

                .cash-info {
                    width: px2rem(290px);
                    height: px2rem(137px);
                    background: url('images/group/cash-bg.png') top center no-repeat;
                    background-size: 100% 100%;
                    padding: px2rem(10px);

                }
                .amount {
                    font-size: px2rem(80px);
                    color: #E81F1E;
                    font-weight: bold;
                }

                .cash-wenan, span {
                    color: #E81F1E;
                    font-size: px2rem(20px);
                    font-weight: bold;
                }
                input {
                    display: none;
                }
            }

            .prize-item-checked {
                background: url('images/group/radio-checked.png') center left no-repeat;
                background-size: px2rem(30px) px2rem(30px);
            }

            .prize-tip {
                color: #370404;
                font-size: px2rem(20px);
                margin-bottom: px2rem(20px);
                margin-left: px2rem(30px);
            }
        }
        .user-info-edit-form {
            .form-box {
                padding: 0 px2rem(25px);
            }
            .form-item {
                height: px2rem(78px);
                line-height: px2rem(78px);
                margin-bottom: px2rem(18px);

                .ui-input {
                    border: px2rem(2px) solid rgba(55, 4, 4, 0.3);
                    border-radius: px2rem(39px);
                    padding: 0 px2rem(50px) 0 px2rem(50px);
                    border-radius: 20px;
                    box-sizing: border-box;
                    line-height: px2rem(76px);
                    color: #333;
                    
                    input {
                        font-weight: 500;
                    }
                }

                .ui-mobile-select {
                    &::after {
                        content: '';
                        width: px2rem(22px);
                        height: px2rem(12px); 
                        /*background: url(images/base/select-arrow.png) center center;*/
                        background: url('images/group/arrow_down.png') no-repeat center;
                        background-size: 100%;
                        position: absolute;
                        right: px2rem(22px);
                        top: px2rem(34px);
                    }
                }

                .ui-checkbox {
                    display: inline-block;
                }

                .get-auth-code {
                    position: absolute;
                    font-size: px2rem(26px);
                    color: #CD0C0A;
                    right: px2rem(60px);
                    text-decoration: underline;
                }
                .get-auth-code-disabled {
                    color: #666666;
                }
            }
            &:last-child {
                margin-bottom: 0;
            }

            .form-item.privacy-policy {
                color: #7B7777;
                font-size: px2rem(20px);
                font-weight: 400;
                word-break: keep-all;
                white-space: nowrap;
                justify-content: center;
                -webkit-justify-content: center;
                font-size: px2rem(24px);
                .label {
                    max-width: px2rem(510px);
                    overflow: hidden;
                }
                a {
                    color: rgba(55, 4, 4, 0.3);
                }
                
            }
        }

        .ui-submit {
            display: block;
            width: px2rem(440px);
            height: px2rem(80px);
            line-height: px2rem(80px);
            text-align: center;
            margin: 0 auto;
            margin-top: px2rem(38px);
            background: url('images/group/btn_popup_bg.png') no-repeat center center;
            background-size: px2rem(440px) px2rem(80px);

            span {
                background: linear-gradient(0deg, #F6DF62 0%, #FFF2D1 100%) ;
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-size: px2rem(24px);
                font-weight: bold;
                letter-spacing: px2rem(4px);
            }
        }
    }
}

// 鲨能星留资隐私政策
.new-privacy-policy {
    font-size: px2rem(24px);
    margin-top: px2rem(30px);
    text-align: center;
    a {
        color: #495362;
    }
}

.collect-user-info {
    .ui-dialog-body {
        background: url('images/group/collect-info-bg.png') bottom center no-repeat !important;
        background-size: 100% auto !important;
        padding: 0;
        padding-bottom: px2rem(45px);
        strong {
            display: none;
        }
    }
}
.choose-prize {
    .ui-dialog-body {
        border-radius: px2rem(20px);
        background: url('images/group/choose-prize-bg.png') top center no-repeat !important;
        background-size: 100% auto !important;
        .ui-submit {
            width: px2rem(220px) !important;
            margin-top: px2rem(30px) !important;
        }
        .advert {
            display: block;
            width: px2rem(440px);
            height: px2rem(90px);
            border-radius: px2rem(10px);
            overflow: hidden;
            img {
                width: 100%;
            }
        }
    }
}

.show-prize-dialog {
    width: px2rem(500px);
    position: relative;
    .ui-dialog-body {
        background: url('images/group/show-prize-bg.png') top center no-repeat !important;
        background-size: 100% auto !important;
        text-align: center;
        padding: px2rem(122px) px2rem(25px) px2rem(50px) px2rem(25px) !important;
        border-radius: px2rem(20px);
        
        .show-prize {
            .title {
                font-size: px2rem(40px)
            }
            .title-img {
                width: px2rem(314px);
                height: px2rem(99px);
                margin: px2rem(25px) auto;
                img {
                    width: 100%;
                }
            }
            .tip {
                color: #370404;
                font-size: px2rem(24px);
                margin-top: px2rem(127px);
            }
        }

        .show-prize-code {
            text-align: center;

            .wenan {
                font-size: px2rem(20px);
                color: #370404;
                margin-top: px2rem(27px);
            }
        
            .code {
                width: px2rem(410px);
                height: px2rem(70px);
                line-height: px2rem(70px);
                border-radius: px2rem(35px);
                border: 1px solid rgba(55, 4, 4, 0.3);
                margin: 0 auto;
                font-size: px2rem(22px);
                color: #370404;
                margin-top: px2rem(80px);
                text-align: center;
            }

            .changan {
                font-size: px2rem(20px);
                color: #370404;
                margin-top: px2rem(149px);
            }

            .title-img {
                width: px2rem(213px);
                height: px2rem(99px);
                margin: px2rem(25px) auto;
                img {
                    width: 100%;
                }
            }
        }

        .advert {
            display: block;
            width: px2rem(440px);
            height: px2rem(90px);
            border-radius: px2rem(10px);
            margin: 0 auto;
            margin-top: px2rem(20px);
            overflow: hidden;
            img {
                width: 100%;
            }
        }
    }

    .ui-submit {
        width: px2rem(300px) !important;
    }
}

.drive-collect-info {
    bottom: 0;
    width: 100%;
    top: unset !important;
    padding-bottom: 0;

    .ui-dialog-body {
        border-top-left-radius: px2rem(30px);
        -webkit-border-top-left-radius: px2rem(30px);
        border-top-right-radius: px2rem(30px);
        -webkit-border-top-right-radius: px2rem(30px);
        background-color: #fff !important;
        background-image: none  !important;
        overflow: hidden;

        .ui-submit {
            width: px2rem(650px);
            background: url('images/house/info-btn-bg.png') top center no-repeat;
            background-size: 100%;
            p {
                font-size: px2rem(30px);
                font-family: MicrosoftYaHei;
                font-weight: bold;
                color: #FFFFFF;
            }
        }
    }

    .ui-dialog-close {
        top: px2rem(20px);
        right: px2rem(20px);
        left: unset !important;
        z-index: 10;
        margin-right: 0;
        background: url('images/base/close.png') top center no-repeat;
        background-size: px2rem(38px) px2rem(34px);
    }
    .user-info-edit-form {
        .form-title {
            text-align: center;
            .wenan {
                font-size: px2rem(46px);
                color: #000;
                font-weight: bolder;
                margin: 0 px2rem(20px);
                margin-bottom: px2rem(20px);
            }
            .icon {
                width: px2rem(90px);
                height: px2rem(2px);
                margin-bottom: px2rem(20px);
                background-image: linear-gradient(to right, #400082 , #fff);
            }
            .icon-left {
                background-image: linear-gradient(to right, #fff , #400082);
            }

            
        }

        .form-item {
            border-bottom: 1px #f1f1f1 solid;
            .form-item-title {
                width: px2rem(120px);
                font-size: px2rem(24px);
                color: #222;
                font-weight: 400;
                div {
                    font-weight: normal;
                }
            }
            &:last-child {
                border-bottom: none;

            }
            .ui-input {
                border: none !important;
                width: px2rem(560px);
                padding-left: px2rem(10px) !important;

                textarea::-webkit-input-placeholder {
                    color: #999;
                    font-size: px2rem(32px);
                    font-weight: 400;
                    font-family: MicrosoftYaHei;
                }

            }

            .ui-mobile-select {
                .ui-input {
                    width: px2rem(320px);
                }

            }

            .get-auth-code {
                color: #000cff !important;
                text-decoration: underline;
            }
        }
        .form-item.privacy-policy {
            a {
                color: #7B7777 !important;
                text-decoration: underline;
            }
        }

        .ui-mobile-city::after {
            right: px2rem(10px);
        }

        .form-item-row {
            .ui-input {
                width: px2rem(200px);
            }
        }
    }
}

/* 表单样式 */
.form {
    .form-item {
        .flex();
        .flex-middle();
        justify-content: space-between;
        -webkit-justify-content: space-between;
        width: 100%;

        .ui-input {
            width: 100%;
            height: 100%;
            
            input {
                font-size: px2rem(26px);
            }
            input::-webkit-input-placeholder, 
            textarea::-webkit-input-placeholder {
                color: #999;
                font-size: px2rem(32px);
                font-weight: 400;
                font-family: MicrosoftYaHei;
            }
        }
        .ui-mobile-select-text {
            font-weight: 500;
            font-size: px2rem(26px);
        }
        .ui-input-placeholder .ui-mobile-select-text {
            color: #666;
            font-size: px2rem(26px);
            font-weight: 400;
            font-family: MicrosoftYaHei;
        }
        .ui-input-error {
            background: #ffead6;
        }
    }
    .ui-mobile-city {
        position: relative;
        &::after {
            content: '';
            width: px2rem(22px);
            height: px2rem(12px); 
            background: url('images/group/arrow_down.png') no-repeat center;
            background-size: 100%;
            position: absolute;
            right: px2rem(22px);
            top: px2rem(34px);
        }
        .ui-mobile-city-text {
            width: 100%;
            height: 100%;
            .form-content();
        }
    }
    .ui-mobile-city-placeholder .ui-mobile-city-text {
        color: #666;
        font-weight: 400;
    }
}

/* 所有选择框的样式 */
.ui-mobile-confirm {
    padding-top: px2rem(92px);
    content: 'item-height:px2rem(68px)';
    background: unset;

    .ui-mobile-confirm-layout {
        background: #ffffff;
        padding: 0 px2rem(26px);

        .ui-mobile-options-view {
            z-index: 2;
            font-size: px2rem(28px);
            line-height: px2rem(68px);
            color: #000;
            border-top: 1px solid #D9D9D9;
            border-bottom: 1px solid #D9D9D9;
        }
        .ui-mobile-scroll-body,
        .ui-mobile-options-view {
            .ui-item {
                height: px2rem(68px);
                box-sizing: border-box;
                color: #333333;
                font-size: px2rem(30px);
                line-height: px2rem(68px);
                color: #333333;
                font-weight: 400;
                text-align: center;
            }
        }
        .ui-mobile-options-view {
            background: #fff;
            right: px2rem(26px);
            left: px2rem(26px);
            width: auto !important;
            .ui-item {
                font-size: px2rem(34px);
                color: #0F9CFF;
            }
        }
    }
    .ui-mobile-confirm-title {
        padding: 0 px2rem(38px);
        height: px2rem(92px);
        // background: #F4F4F4;
        border-top-left-radius: px2rem(20px);
        border-top-right-radius: px2rem(20px);
        border-bottom: px2rem(2px) solid #EBEBEB;
        .flex();
        font-weight: 500;
        justify-content: space-between;

        .confirm-sure,
        .confirm-title,
        .confirm-cancel {
            color: #0F9CFF;
            font-size: px2rem(32px);
            line-height: px2rem(92px);
            text-align: center;
        }
        .confirm-title {
            flex: 1;
            display: none;
        }
        .confirm-cancel {
            color: #999999;
            left: px2rem(38px);
            right: unset;
        }
    }
}


.ui-mobile-calendar-popup {
    .ui-mobile-confirm-layout {
        width: 100%;
        display: flex;
    }
    .ui-mobile-options {
        content: 'item-height:px2rem(68px)' !important;

        .ui-mobile-options-view {
            right: 0;
            left: 0;
        }
    }


}
.ui-mobile-date-popup {
    .ui-mobile-confirm-layout {
        display: flex;
    }

    .ui-mobile-options {
        flex: 1;
        height: 210px;
        content: 'item-height:px2rem(68px)';

        .ui-item {
            height: 30px;
        }

        .ui-item-selected,
        .ui-item-focus {
            /*font-weight: bold;*/
        }
    }
}
/* checkbox样式 */
.ui-checkbox {
    width: px2rem(24px);
    height: px2rem(24px);
    background: url(images/base/checkbox-uncheck.png) center center no-repeat;
    background-size: px2rem(24px) px2rem(24px);
    margin-right: px2rem(6px);

    input {
        display: none;
    }
}
.ui-checkbox-checked {
    background: url(images/base/checkbox-checked.png) center center no-repeat;
    background-size: px2rem(23px) px2rem(23px);
}

/* 公共样式 end */


.ui-wang-editor-cont {

    em {
        font-style: italic;
    }
    strong {
        font-weight: bold;
    }
    em strong {
        font-style: italic;
    }
}

.ui-mask {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.ui-popup {
    width: 100%;
    /* padding-left: px2rem(30px);
    padding-right: px2rem(30px); */

    .ui-calendar {
        height: 100%;
        text-align: center;

        .ui-calendar-header {
            border: unset;
            width: 100%;
            height: px2rem(90px);
        }

        table {
            width: 100%;
            padding-left: px2rem(30px);
            padding-right: px2rem(30px);
            border-spacing: 0px px2rem(8px);

            tbody {
                width: 100%;
                border-collapse: separate;
                border-spacing: px2rem(20px);

                tr {
                    height: px2rem(68px);
                    color: #1D1D26;
                    text-align: center;
                    overflow: hidden;

                    &.ui-extra {
                        display: none;
                    }

                    td {
                        position: relative;
                        height: px2rem(52px);
                        width: px2rem(52px);
                    }

                    .ui-calendar-date-selected {
                        background: white;
                    }

                    .ui-extra {
                        background: #FFFFFF;
                        color: #d3d3d3;
                    }

                    .ui-calendar-date-disabled {
                        opacity: 0.5;
                    }

                    div {
                        position: relative;
                        z-index: 1;
                        width: px2rem(52px);
                        height: px2rem(52px);
                        margin: auto;
                        line-height: px2rem(52px);
                    }

                    .day-last-selected {
                        /* background: #B9CEEA;
                        border-radius: 0 px2rem(34px) px2rem(34px) 0; */
                        color: white;
                        position: relative;

                        /* right: px2rem(10px); */
                        div {
                            width: px2rem(52px);
                            height: px2rem(52px);
                            line-height: px2rem(52px);
                            text-align: center;
                            background: #0084FF;
                            border-radius: px2rem(26px);
                            color: white;
                            margin: auto;
                            display: block;
                            /* position: absolute; */
                            /* right:px2rem(10px); */
                            /* top: px2rem(8px);  */

                        }
                    }

                    .day-first-selected {
                        /* background: #B9CEEA;
                        border-radius: px2rem(34px) 0 0 px2rem(34px); */
                        color: white;
                        position: relative;

                        /* left: px2rem(18px); */
                        div {
                            width: px2rem(52px);
                            height: px2rem(52px);
                            line-height: px2rem(52px);
                            text-align: center;
                            background: #0084FF;
                            border-radius: px2rem(26px);
                            color: white;
                            margin: auto;
                            display: block;
                            /* position: absolute; */
                            /* left: px2rem(8px); */
                            /* top: px2rem(8px); */
                        }
                    }

                    .ui-calendar-date-selected {
                        background: white;

                        div {
                            width: px2rem(52px);
                            height: px2rem(52px);
                            line-height: px2rem(52px);
                            text-align: center;
                            background: #0084FF;
                            border-radius: px2rem(26px);
                            color: white;
                            margin: auto;
                        }
                    }

                    .day-line-first-selected::before,
                    .day-line-last-selected::before,
                    .day-first-selected::before,
                    .day-last-selected::before,
                    .day-selected::before {
                        content: ' ';
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background: #B9CEEA;


                    }

                    .day-first-selected::before {
                        left: px2rem(16px);
                        border-radius: px2rem(34px) 0 0 px2rem(34px);
                    }

                    .day-last-selected::before {
                        right: px2rem(14px);
                        border-radius: 0 px2rem(34px) px2rem(34px) 0;
                    }

                }

                .seleted-week {
                    background: #0084FF;

                }
            }
        }
    }
}


.ui-mobile-listview {

    .ui-mobile-listview-header {
        height: px2rem(200px);
        width: 100%;
        text-align: center;

        div {
            height: 100%;
            width: 100%;
            margin: 0 auto;
        }
    }
    .ui-mobile-listview-empty-body {
        position: absolute !important;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        display: none;
    }
    .ui-mobile-listview-footer {
        text-align: center;
        height: px2rem(100px);
    }
    &.ui-mobile-listview-empty {
        .ui-mobile-listview-empty-body {
            display: block;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
        }
        
    }
    &.ui-mobile-listview-init.ui-mobile-listview-empty {
        .ui-mobile-listview-empty-body {
            display: none;
        }
    }
}

.ui-mobile-listview-empty .ui-mobile-listview-empty-body {
    // background: url('images/base/icon_nodata.png') center center no-repeat;
    background-size: 20%;
    height: 100%;
    display: block !important;

    .empty-tip {
        position: absolute;
        top: 40%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;

        img {
            width: px2rem(240px);
            height: px2rem(240px);
        }

        p {
            margin-bottom: px2rem(60px);
        }
    }
}

.no-data {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -moz-box;
    /*Firefox*/
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*margin-top: px2rem(200px);*/

    img {
        width: px2rem(240px);
        height: px2rem(240px);
        margin-top: -px2rem(168px);
    }

    p {
        font-size: px2rem(32px);
        margin-top: px2rem(50px);
        color: #858585;
    }
}
.list-empty{
    width: 100%;
    text-align: center;
    position: relative;
    .empty-box {
        display: table-cell;
        vertical-align: middle;
        img {
            position: relative;
            display: block;  
            width: px2rem(334px);
            height: px2rem(238px);
            margin: auto;
            /* top: 50%;
            margin-top: -px2rem(119px); */
        }
        .nodata-tip {
            margin-top: px2rem(30px);
            font-size: px2rem(28px);
            color: #54617A;
        }
        .loading-text {
            display: none !important;
        }
    }
    
}
.ui-mobile-listview-init {
    .list-empty .empty-box {
        /* height: px2rem(100px) !important; */
        display: table-cell !important;
        vertical-align: middle;
        img {
            position: relative;
            display: block;  
            /* display:inline-block; */
            content:url(images/isp/loading.gif);
            width: px2rem(60px)  !important;
            height: px2rem(60px)  !important;
            margin: auto;
        }
        .nodata-tip {
            display: none !important;
        }
        .loading-text {
            display: block !important;  
            margin-top: px2rem(30px);
            font-size: px2rem(28px);
            color: #54617A;
        }
    }
    
}
.ui-mobile-listview-header,
.ui-mobile-listview-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999999;
}

.nodatainview {
    text-align: center;

    img {
        width: px2rem(200px);
    }
    .alert-textclass {
        font-size: px2rem(24px);
        color: #838B92;
        line-height: px2rem(30px);
        margin-top: px2rem(20px);
    }
}

.no-result {
    border-radius: px2rem(14px);
    background: #fff;
    height: px2rem(280px);
    line-height: px2rem(280px);
    text-align: center;
    .text {
        font-size: px2rem(24px);
        color: #BBBFC4;
    }
}

.refresh-container {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #f2f4f8;
    // background: #fff;

    .bg1 {
        position: absolute;
        left: 0;
        top: px2rem(20px);
        width: 100%;
        animation: 6s move1 infinite linear;
    }

    .bg2 {
        position: absolute;
        left: px2rem(670px);
        top: px2rem(20px);
        width: 100%;
        animation: 6s move2 infinite linear;
    }

    .refresh-gif {
        height: px2rem(80px);
        width: px2rem(80px);
        position: relative;
        z-index: 99;
        top: px2rem(38px);
        /* animation: 0.56s car-run infinite linear; */
    }

    .refresh-text {
        height: px2rem(36px);
        width: 100%;
        text-align: center;
        position: absolute;
        top: px2rem(160px);
        left: 0;
        font-size: px2rem(24px);
    }

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        display: flex;

        .half-mask-left {
            flex: 1;
            height: 100%;
            background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
        }

        .half-mask-right {
            flex: 1;
            height: 100%;
            background: -webkit-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
        }

    }
}
.footer-loading {
    width: 100%;
    text-align: center;
    
    img {
        display: block;
        margin: auto;
        padding-top: px2rem(20px);
        width: px2rem(36px);
        height: px2rem(36px);
        /* animation: backTransR 1s linear infinite; */
    }
   
}



.ui-dialog {
    .ui-dialog-title {
        display: none;
    }
    .ui-dialog-body {
        border-radius: px2rem(20px);
        background: #fff;
        overflow: hidden;
    }

    .ui-dialog-close {
        display: none;
    }

    .ui-dialog-body {

        .ui-messagebox-content {
            text-align: center;
            min-height: px2rem(40px);
            line-height: px2rem(40px);
            font-size: px2rem(32px);
            font-weight: bold;
            padding: px2rem(32px);
            color: #333;
            padding: px2rem(46px) px2rem(70px) !important;
            box-sizing: border-box;
            .text-container {
                line-height: normal;
                padding: px2rem(40px) px2rem(20px);
            }

        }

        .ui-messagebox-buttons {
            position: relative;
            height: px2rem(86px);
            line-height: px2rem(86px);
            border-top: 0;

            .ui-button {
                position: relative;
                font-size: px2rem(32px);
                color: #999;
                height: px2rem(86px);
                line-height: px2rem(86px);
                border: 0;
                padding: 0;
            }

            .ui-button:first-child {
                font-size: px2rem(32px);
                color: #0F9CFF;
                height: px2rem(86px);
                line-height: px2rem(86px);
                background: unset;
                border-left: 0;

                &::after {
                    content: ' ';
                    position: absolute;
                    background: #B1B1B1;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    height: 100%;
                    width: px2rem(2px);
                    transform: scaleX(0.5);
                    z-index: 1;
                }
            }
            &::after {
                content: ' ';
                position: absolute;
                background: #B1B1B1;
                left: 0;
                right: 0;
                width: 100%;
                height: px2rem(2px);
                transform: scaleY(0.5);
                z-index: 1;
            }
        }
    }
}


.ui-messagebox {
    max-width: 70%;
}

/* 多选样式 */
.footer-load {
    width: 100%;
    text-align: center;
    
    img {
        display: block;
        margin: auto;
        padding-top: px2rem(20px);
        width: px2rem(36px);
        height: px2rem(36px);
        /* animation: backTransR 1s linear infinite; */
    }
   
}



.list-loading {
    width: 100%;
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    .empty-box {
        width: 100%;
        vertical-align: middle;
        img {
            position: relative;
            display: block;  
            width: px2rem(60px);
            height: px2rem(60px);
            margin: 0 auto;
            /* top: 50%;
            margin-top: -px2rem(119px); */
        }
        .nodata-tip {
            margin-top: px2rem(20px);
            font-size: px2rem(28px);
            color: #54617A;
        }
    }
}
/* 处理大屏样式 >375 */
.big-screen {
    .hot-point-item {
        max-height: px2rem(72px) !important;
    }
}

.water-mask-container {
    display: none;
}
ul.water-mask-container {
    display: block;
    position: absolute;
    left: -px2rem(200px);
    top: -px2rem(200px);
    z-index: 0;
    width: px2rem(1300px);
    font-size: 0;
    opacity: 1;
    transform: rotate(-30deg);

    li {
        display: inline-block;
        vertical-align: middle;
        width: px2rem(250px);
        font-size: px2rem(28px);
        height: px2rem(64px);
        line-height: px2rem(64px);
        padding: px2rem(60px) 0;
        text-align: left;
    }
    
    &:after {
        content: ' ';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1;
        background: #fff;
        opacity: 0.91;
    }
}


/*****编辑项样式  start*/
.edit-item {
    display: flex;
    position: relative;
    height: px2rem(88px);
    line-height: px2rem(88px);
    font-size: px2rem(30px);
    padding-left: px2rem(36px);
    background: #fff;
    margin-bottom: px2rem(24px);

    .ui-input-label {
        font-size: px2rem(32px);
    }
    .edit-input,
    .edit-text {
        flex-grow: 1;
        flex: 1;
        text-align: right;
        font-size: px2rem(32px);
        padding-right: px2rem(64px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 0px;
        padding-left: px2rem(20px);
        height: px2rem(88px);
        line-height: px2rem(88px);

        &.ui-input-placeholder,
        &.placeholder,
        &.placeholder .select-text,
        &::placeholder,
        input::placeholder {
            color: #999999;
            font-size: px2rem(32px);
        }
        input {
            text-align: right;
            box-sizing: border-box;
            padding: 0 10px;
        }
        .ui-radio,
        .ui-checkbox {
            display: inline-flex;
            vertical-align: middle;
            justify-content: center;
            width: px2rem(160px);
            height: px2rem(68px);
            line-height: px2rem(68px);
            box-sizing: border-box;
            font-size: px2rem(32px);
            color: #0F9CFF;
            background: #fff;
            border: 1px solid #0F9CFF;
            border-right: 0;

            input {
                display: none;
            }
            span {
                color: #0F9CFF;
            }
        }
        .ui-radio:first-child,
        .ui-checkbox:first-child {
            border-top-left-radius: px2rem(8px);
            border-bottom-left-radius: px2rem(8px);
        }
        .ui-radio:last-child,
        .ui-checkbox:last-child {
            border-right: 1px solid #0F9CFF;
            border-top-right-radius: px2rem(8px);
            border-bottom-right-radius: px2rem(8px);
        }
        .ui-radio.ui-radio-checked,
        .ui-checkbox.ui-checkbox-checked {
            color: #fff;
            background: #0F9CFF;

            span {
                color: #fff;
            }
        }
    }
    .checkbox.edit-text,
    .checkbox.edit-input,
    .radio.edit-text,
    .radio.edit-input {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: px2rem(36px);
        font-size: 0;
    }
    .select-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        min-height: 100%;
    }
    .edit-must,
    .ui-input-required {
        color: #F7634F;
        margin-left: 5px;
        font-size: px2rem(48px);
        line-height: px2rem(48px);
        vertical-align: top;
        position: absolute;
        left: -px2rem(30px);
        top: px2rem(4px);
    }
    .edit-icon {
        position: absolute;
        top: px2rem(28px);
        right: px2rem(30px);
        width: px2rem(16px);
        height: px2rem(30px);
        background: url(images/base/arrow-r-gray.png) no-repeat;
        background-size: 100%;
    }
    .edit-text-unit,
    .ui-unit {
        position: absolute;
        top: 0;
        right: px2rem(10px);
        height: 0.6rem;
        width: 0.5rem;
        margin-top: 1px;
        font-size: px2rem(28px);
    }
    
    &.image {
        display: block;
        height: auto;
        padding-top: px2rem(20px);
        padding-bottom: px2rem(20px);

        .ui-input-label {
            display: block;
            height: px2rem(50px);
            line-height: px2rem(50px);
            font-size: px2rem(30px);
        }
        .ui-images {
            display: block;

            .ui-image-add {
                position: relative;
                display: inline-block;
                vertical-align: middle;
                width: px2rem(120px);
                height: px2rem(120px);
                border-radius: px2rem(120px);
                margin: px2rem(16px);
                padding: 0;

                input.file {
                    position: absolute;
                    z-index: 1;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    opacity: 0;
                }

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .ui-image-add:first-child {
                margin-left: 0;
            }

            .ui-image-add:last-child {
                margin-left: 0;
            }
        }
    }

    // &:after {
    //     position: absolute;
    //     content: ' ';
    //     height: 1px;
    //     transform: scaleY(.5);
    //     background: #EEEEEE;
    //     left: 0;
    //     right: 0;
    //     bottom: 0;
    // }
}
.ui-textarea {
    .ui-input {
        height: px2rem(160px) !important;
    }
    textarea {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.ui-upload {
    .img-cont {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    input {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        opacity: 0;
    }
    .close {
        position: absolute;
        top: -px2rem(20px);
        right: -px2rem(20px);
        width: px2rem(44px);
        height: px2rem(44px);
        background: url('images/svg/close.svg') center no-repeat;
        background-size: px2rem(28px) auto;
        z-index: 1;
    }
    &.file-add {
        .colse {
            display: none;
        }
    }
}
.ui-files {
    display: block;
    height: auto;
    padding-right: px2rem(30px);

    .ui-input-label {
        display: block;
        height: px2rem(50px);
        line-height: px2rem(50px);
    }
    .edit-input,
    .edit-text {
        overflow: visible !important;
    }

    .ui-file-list {
        position: relative;
        width: 100%;
        height: auto;
        text-align: left;
        padding-left: 0;
        font-size: 0;
        display: flex !important;

        .label {
            padding-left: px2rem(40px);
            padding-right: px2rem(20px);
            vertical-align: top;

            .title {
                font-size: px2rem(30px);
                color: #333333;
                margin-bottom: px2rem(10px);
            }
            .tip {
                font-size: px2rem(22px);
                color: #999999;
            }
        }
        .file-items {
            display: inline-block;
            vertical-align: top;
            overflow: auto;
            height: px2rem(140px);
            font-size: 0;
            flex: 1;
        }

        .ui-upload {
            position: relative;
            display: inline-block;
            vertical-align: top;
            margin: px2rem(20px) px2rem(10px) px2rem(10px);
            width: px2rem(100px);
            height: px2rem(100px);
            border: px2rem(2px) solid #F6F6F6;
        }
        .file-add {
            position: absolute;
            top: -px2rem(70px);
            right: px2rem(10px);
            width: px2rem(80px);
            height: px2rem(80px);
            margin: px2rem(10px);
            border: 0;
            background: url('images/svg/add-border-round.svg') center no-repeat;
            background-size: px2rem(40px) auto;
            margin-left: px2rem(40px);
            overflow: hidden;

            .close {
                display: none;
            }
            img {
                display: none;
            }
        }
        &.placeholder {
            height: 0 !important;
            min-height: 0 !important;
            padding: px2rem(10px) 0 0 !important;
        }
    }

}
.ui-poples,
.ui-music-poples {
    display: block;
    height: auto;

    .ui-input-label {
        display: block;
        height: px2rem(50px);
        line-height: px2rem(50px);
    }


    .edit-input,
    .edit-text {
        overflow: visible !important;
    }
    .ui-pople-list {
        position: relative;
        width: 100%;
        height: auto;
        text-align: left;
        padding-left: 0;
        font-size: 0;
        display: flex !important;

        .input-array,
        input {
            display: none;
        }

        .label {
            padding-left: px2rem(40px);
            padding-right: px2rem(20px);
            vertical-align: top;

            .title {
                font-size: px2rem(30px);
                color: #333333;
                margin-bottom: px2rem(10px);
            }
            .tip {
                font-size: px2rem(22px);
                color: #999999;
            }
        }
        .people-items {
            display: inline-block;
            vertical-align: top;
            overflow: auto;
            height: px2rem(140px);
            font-size: 0;
            flex: 1;
            text-align: right;

            .people-item {
                position: relative;
                display: inline-block;
                vertical-align: middle;
                width: px2rem(68px);
                height: px2rem(68px);
                margin: px2rem(16px);
                text-align: center;

                input {
                    display: none;
                }

                img,
                .head {
                    display: block;
                    width: px2rem(68px);
                    height: px2rem(68px);
                    line-height: px2rem(68px);
                    margin: 0 auto;
                    font-size: px2rem(24px);
                    text-align: center;
                    color: #fff;
                    background-color: #0F9CFF;
                    border-radius: px2rem(10px);
                    overflow: hidden;
                }
                .name {
                    display: block;
                    font-size: px2rem(22px);
                    line-height: px2rem(38px);
                    color: #999999;
                }

                .close {
                    position: absolute;
                    top: -px2rem(12px);
                    right: -px2rem(12px);
                    width: px2rem(24px);
                    height: px2rem(24px);
                    background: url('images/svg/close.svg') no-repeat no-repeat center center;
                    background-size: 100% auto;
                    z-index: 1;
                }
            }
        }

        .people-add {
            position: relative;
            display: inline-block;
            vertical-align: top;
            width: px2rem(68px);
            height: px2rem(68px);
            margin: px2rem(10px);
            background: url('images/svg/add-border.svg') center no-repeat;
            background-size: 100% auto;
            margin-left: px2rem(40px);

            img {
                display: none;
            }
        }
        &.ui-required .people-add::after,
        .people-add.ui-required::after {
            content: ' ';
            position: absolute;
            top: -px2rem(16px);
            right: -px2rem(16px);
            width: px2rem(36px);
            height: px2rem(36px);
            font-size: px2rem(36px);
            z-index: 1;
            background: url('images/svg/must.svg') center no-repeat;
            background-size: 100% auto;
        }
        &::before,
        &::after {
            content: ' ';
            position: absolute;
            background: #ccc;
            top: px2rem(40px);
            width: px2rem(12px);
            height: px2rem(12px);
            border-radius: px2rem(12px);
            z-index: 1;
        }
        &::after {
            width: px2rem(2px);
            height: auto;
            left: px2rem(5px);
            top: px2rem(60px);
            bottom: -px2rem(32px);
        }
        &.last::after {
            display: none;
        }
    }
}
.ui-music-poples {
    padding: px2rem(30px) 0 0 !important;

    .ui-input-label {
        margin-left: px2rem(38px);
        height: px2rem(44px);
        line-height: px2rem(44px);
        padding-bottom: px2rem(30px);
    }
    .ui-pople-list {
        &::before,
        &::after {
            display: none;
        }
        .label {
            display: none;
        }
    }
    .ui-music-people {
        display: block !important;
        padding: 0 !important;

        .people-items {
            display: block !important;
            height: auto !important;

            .people-item {
                display: flex;
                align-items: center;
                width: auto;
                height: px2rem(68px);
                padding: px2rem(12px) px2rem(30px);
                text-align: left;
                margin: 0;
                border-bottom: px2rem(2px) solid #F8F8F8;

                img,
                .head {
                    display: inline-block;
                    vertical-align: middle;
                    font-size: px2rem(24px);
                    text-align: center;
                    color: #fff;
                    background-color: #0F9CFF;
                    border-radius: px2rem(10px);
                    margin-right: px2rem(20px);
                }
                .name {
                    display: inline-block;
                    vertical-align: middle;
                    font-size: px2rem(32px);
                    line-height: px2rem(68px);
                    color: #333;
                    flex: 1;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .close {
                    position: relative;
                    top: 0;
                    right: 0;
                    width: px2rem(90px);
                    height: px2rem(54px);
                    line-height: px2rem(54px);
                    box-sizing: border-box;
                    text-align: center;
                    background: none;
                    font-size: px2rem(24px);
                    border: px2rem(2px) solid #ccc;
                    border-radius: px2rem(8px);

                    &::after {
                        content: '移除';
                    }
                }
            }
        }
        &:not(.placeholder) {
            .people-add {
                position: absolute;
                top: -px2rem(90px);
                right: px2rem(10px);
                width: px2rem(80px);
                height: px2rem(80px);
                margin: 0 !important;
                font-size: 0;
                border: 0;
                background: url('images/svg/add-border-round.svg') center no-repeat;
                background-size: px2rem(40px) auto;
                margin-left: px2rem(40px);
                overflow: hidden;
            }
        }
        &.placeholder {
            .people-add {
                display: block;
                width: auto;
                height: px2rem(82px);
                line-height: px2rem(82px);
                color: #0F9CFF;
                font-size: px2rem(32px);
                margin: 0;
                background: none;
                text-align: center;
    
                &::before {
                    content: ' ';
                    display: inline-block;
                    vertical-align: text-top;
                    width: px2rem(32px);
                    height: px2rem(32px);
                    margin-right: px2rem(8px);
                    background: url('images/svg/add-blue.svg') center no-repeat;
                    background-size: px2rem(32px) auto;
                }
            }
        }
    }
}

.vertical-arrangement {
    .edit-item {
        position: relative;
        display: block;
        padding: 0;
        height: auto;
        line-height: px2rem(60px);
        padding: px2rem(30px) 0 px2rem(20px) px2rem(38px);

        .ui-input-label {
            position: relative;
            // position: absolute;
            // left: px2rem(36px);
            // top: px2rem(20px);
            font-size: px2rem(32px);
            height: px2rem(40px);
            line-height: px2rem(40px);
        }
        .edit-icon {
            top: px2rem(90px);
        }

        .edit-input,
        .edit-text {
            display: block;
            text-align: left;
            height: auto;
            min-height: px2rem(40px);
            line-height: px2rem(40px);
            width: auto;
            padding: px2rem(20px) 0;
            white-space: nowrap;

            input {
                text-align: left;
            }
        }
        &.inline-radio,
        &.inline-checkbox {
            display: flex;
            align-items: center;
            padding: px2rem(18px) 0 px2rem(18px) px2rem(38px);

            .edit-input {
                padding: 0;
                min-height: px2rem(68px);
                text-align: right;
            }
        }
        &.button-select {
            padding-right: px2rem(38px);

            .edit-input,
            .edit-text {
                position: relative;
                // padding: px2rem(80px) px2rem(36px) px2rem(20px) px2rem(36px);
                min-height: px2rem(68px);

                &::after {
                    content: attr(button-text);
                    display: none;
                    position: absolute;
                    height: px2rem(68px);
                    line-height: px2rem(68px);
                    top: px2rem(20px);
                    left: 0;
                    right: 0;
                    border: px2rem(2px) solid #EEEEEE;
                    border-radius: px2rem(8px);
                    color: #0F9CFF;
                    background: #fff;
                    font-size: px2rem(28px);
                    text-align: center;
                }
                &.placeholder::after {
                    display: block;
                }
            }

            .edit-icon {
                display: none;
                top: px2rem(14px);
            }
        }

        &.link-style {
            .edit-input:not(.placeholder),
            .edit-text:not(.placeholder) {
                overflow: visible !important;

                &::after {
                    content: ' ';
                    display: block !important;
                    top: -px2rem(70px);
                    right: px2rem(-12px);
                    left: unset;
                    width: px2rem(80px);
                    height: px2rem(80px);
                    border: 0;
                    font-size: 0;
                    background: url('images/svg/add-border-round.svg') center no-repeat;
                    background-size: px2rem(40px) auto;
                    overflow: hidden;

                }
            }
        }
        // 费用明细
        &.book-select {
            .edit-input,
            .edit-text {
                &::after {
                    display: none !important;
                }

                .ui-button {
                    vertical-align: middle;
                    width: 47%;
                    font-size: px2rem(32px);
                    color: #0F9CFF;
                    border: px2rem(2px) solid #EEEEEE;
                    border-radius: px2rem(8px);

                    .select-text {
                        color: #0F9CFF;
                    }
                }
            }
        }
        &.ui-poples,
        &.ui-music-poples {
            height: auto;
            padding-right: px2rem(30px);

            .edit-input,
            .edit-text {
                height: auto;
            }
        }
    }
}
.ui-common-select {

    // .select-text {
    //     font-size: px2rem(24px);
    //     // color: #0F9CFF;
    // }
}
.apply-button-select {
    .ext-clear {
    
        .ext-clear-button {
            top: px2rem(42px);
            right: px2rem(22px);
        }
    }
}
/*****编辑项样式  end*/


/*详情页信息展示*/
.detail-title {
    padding: px2rem(16px) px2rem(36px) px2rem(30px);
    background: #fff;

    .title-text {
        font-size: px2rem(40px);
        line-height: px2rem(48px);
        color: #333;
        padding: px2rem(8px) 0;
    }
    .title-tip {
        font-size: px2rem(30px);
        line-height: px2rem(44px);
        color: #FBAE38;
        padding: px2rem(8px) 0;
    }
}
.info-part {
    position: relative;
    margin: px2rem(24px) px2rem(36px);
    padding: px2rem(24px) px2rem(36px);
    border-radius: px2rem(24px);
    background: #fff;

    .info-item {
        margin-bottom: px2rem(16px);

        &.info-item-title {
            background: #F6F6F6;
            height: px2rem(40px);
            line-height: px2rem(40px);
            font-size: px2rem(24px);
            margin: px2rem(16px) 0;
            padding-left: px2rem(16px);
        }
        &.level-2 {
            padding-left: px2rem(16px);
        }
        .info-label {
            line-height: px2rem(36px);
            padding: px2rem(8px) 0;
            color: #999999;
            font-size: px2rem(30px);
        }
        .info-text {
            line-height: px2rem(40px);
            padding: px2rem(8px) 0;
            color: #333333;
            font-size: px2rem(34px);

            .head-img {
                display: inline-block;
                vertical-align: middle;
                width: px2rem(80px);
                height: px2rem(80px);
                border-radius: 50%;
            }
        }
    }
    &.approval-part,
    &.file-part {
        .part-title {
            color: #333333;
            font-size: px2rem(34px);
            line-height: px2rem(42px);
            padding: px2rem(12px) 0;
            margin-bottom: px2rem(36px);
        }
        .file-items,
        .approval-items {
            font-size: 0;

            .approval-item {
                position: relative;
                display: block;

                .people-head {
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 2;
                    width: px2rem(80px);
                    height: px2rem(80px);
                    line-height: px2rem(80px);
                    border-radius: 50%;
                    text-align: center;
                    background: #E84F4B;
                    color: #fff;
                    font-size: 16px;
                }
                .approval-info {
                    position: relative;
                    padding: px2rem(20px) 0 px2rem(20px) px2rem(90px);
                    display: webkit-flex;
                    display: flex;

                    .approval-people-info {
                        height: px2rem(36px);
                        line-height: px2rem(36px);
                        font-size: 0;
                        padding-left: px2rem(20px);
                        white-space: nowrap;

                        .name,
                        .status {
                            display: inline-block;
                            vertical-align: middle;
                            font-size: px2rem(30px);
                            color: #333;
                        }
                    }
                    .comment-info {
                        min-height: px2rem(72px);
                        line-height: px2rem(36px);
                        font-size: px2rem(30px);
                        color: #333;
                        padding-left: px2rem(20px);
                        flex: 1;
                    }
                    .approval-time {
                        color: #999999;
                        font-size: px2rem(26px);
                        padding-left: px2rem(20px);
                        white-space: nowrap;
                    }
                    .people-delete {
                        width: 20px;
                        height: 20px;
                        line-height: 20px;
                        font-size: 0;
                        background: url('images/base/people-delete-icon.png') no-repeat center;
                        background-size: 100% auto;
                        cursor: pointer;
                    }
                }
                .pople-list {
                    position: relative;
                    padding: px2rem(20px) 0 px2rem(20px) px2rem(90px);
                    display: webkit-flex;
                    display: flex;

                    .people-item {
                        display: inline-block;
                        vertical-align: top;
                        line-height: px2rem(36px);
                        margin-right: px2rem(16px);
                        font-size: 0;
                        padding-left: px2rem(20px);
                        white-space: nowrap;

                        .head {
                            display: block;
                            width: px2rem(40px);
                            height: px2rem(40px);
                            line-height: px2rem(40px);
                            font-size: px2rem(16px);
                            text-align: center;
                            margin: 0 auto px2rem(8px);
                            border: px2rem(1px) solid #666;
                            background: #fff;
                            color: #333;
                            border-radius: 50%;
                        }
                        .name {
                            display: block;
                            font-size: px2rem(30px);
                            color: #333;
                        }
                    }
                }
            }
            .file-item {
                position: relative;
                display: inline-block;
                vertical-align: middle;
                width: px2rem(100px);
                min-height: px2rem(100px);
                margin: px2rem(12px);

                a {
                    display: block;
                }
                img {
                    width: px2rem(100px);
                    height: px2rem(100px);
                    border: px2rem(1px) solid #e6e6e6;
                }
                .file-name {
                    margin-top: px2rem(12px);
                    font-size: px2rem(20px);
                    height: px2rem(32px);
                    line-height: px2rem(32px);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            .approval-item.copy-and-send {
                .people-head{
                    border-radius: 0;
                    background: url('images/base/copy-title-icon.png') no-repeat center;
                    background-size: px2rem(80px) px2rem(80px);
                }
                .pople-list {
                    padding-left: 0;
                    margin-left: px2rem(90px);
                    overflow: auto;
                }
            }
            .approval-item:before {
                content: ' ';
                position: absolute;
                border-left: px2rem(2px) solid @primaryColor;
                height: 100%;
                top: px2rem(40px);
                left: px2rem(40px);
                z-index: 1;
            }
            .approval-item:nth-last-of-type(1):before {
                content: '';
                display: none;
            }
        }
    }
    &.file-part {
        padding: px2rem(24px);

        .part-title {
            margin-left: px2rem(12px);
        }
    }
}

.operate-btn-box {
    width: 100%;
    height: px2rem(160px);
    text-align: center;
    border-top: 1px solid #ECECEC;
    color: @primaryColor;
    background: #fff;
    font-size: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .ui-text {
        position: relative;
        display: block;
        width: auto;
        height: px2rem(88px);
        padding: 0 px2rem(30px);
        line-height: px2rem(160px);

        input {
            position: relative;
            z-index: 2;
            display: none;
            box-sizing: border-box;
            width: px2rem(560px);
            height: px2rem(88px);
            line-height: px2rem(68px);
            margin: px2rem(10px) auto !important;
            padding: px2rem(10px) !important;
            margin: 0 !important;
            border: px2rem(1px) solid #ccc !important;
            font-size: px2rem(28px);
            opacity: 0;
        }
        input.text {
            width: px2rem(510px);
            line-height: normal;
        }
        input.submit-btn {
            position: absolute;
            top: 0;
            right: px2rem(30px);
            width: px2rem(160px);
            text-align: center;
            font-size: px2rem(36px);
            color: #fff !important;
            background-color: @primaryColor;
            border: px2rem(1px) solid @primaryColor !important;
        }
    }
    .ui-text-focus {
        position: absolute;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        z-index: 2;
        background: #fff;

        input {
            display: block;
            opacity: 1;
        }
        .btn-items {
            display: none;
        }
    }

    .btn-items {
        z-index: 1;
        height: px2rem(88px);
        font-size: 0;
        text-align: left;
        line-height: normal;
        white-space: nowrap;

        .btn-item {
            display: inline-block;
            vertical-align: middle;
            width: px2rem(80px);
            opacity: 1;
            border-width: 0 !important;
            text-align: center;
            color: #616161;
            height: 100%;
            line-height: normal;

            .icon {
                display: block;
                margin: 0 auto;
                width: px2rem(40px);
                height: px2rem(40px);
                margin-top: px2rem(10px);
                background: url('images/base/comment.png') no-repeat center;
                background-size: 100% auto;
            }
            .icon.more {
                background: url('images/base/more.png') no-repeat center;
                background-size: 100% auto;
            }
            .icon.again {
                background: url('images/svg/again.svg') no-repeat center;
                background-size: 100% auto;
            }
            span {
                display: inline-block;
                vertical-align: middle;
                font-size: px2rem(20px);
                height: px2rem(28px);
                margin-top: px2rem(10px);
                color: #616161;
            }
        }
        .btn-item.comment-item {

        }
    }
    .operate-btns {
        flex: 1;
        height: px2rem(88px);
        font-size: 0;
        text-align: right;
        white-space: nowrap;
        padding-right: px2rem(30px);

        .operate-btn {
            display: inline-block;
            vertical-align: middle;
            width: px2rem(160px);
            height: px2rem(88px);
            line-height: px2rem(88px);
            padding: 0;
            color: @primaryColor;
            border: px2rem(2px) solid @primaryColor;
            background: #fff;
            font-size: px2rem(36px);
            border-radius: px2rem(12px);
            margin-left: px2rem(20px);
        }
        .agree-btn {
            background: @primaryColor;
            color: #fff;
        }
        .refuse-btn {
        }
    }
}

/*详情页信息展示*/

.ui-layer-popup {
    width: 80%;
    background: #fff;
    padding-top: px2rem(88px);

    .ui-popup-close {
        position: absolute;
        top: px2rem(30px);
        right: px2rem(30px);
        width: px2rem(30px);
        height: px2rem(30px);
        background: url('images/svg/close-2.svg') center no-repeat;
        background-size: 100% auto;
    }

    .ui-layer-popup-cont {
        height: 100%;
        overflow-y: auto;
    }
}
.ui-echarts {
    height: 100%;
    width: 100%;
    
    .ui-chart-content {

    height: 100%;
    width: 100%;
    }
}
.ui-cost-invoice-add-popup {
    width: 100%;
    padding: 0;
    padding-bottom: px2rem(100px);
    border-radius: px2rem(24px) px2rem(24px) 0 0;

    .ui-layer-popup-cont   {
        padding: px2rem(40px) px2rem(40px) 0;
        font-size: 0;
        li {
            position: relative;
            display: inline-block;
            vertical-align: top;
            width: 25%;
            text-align: center;
            height: auto;
            line-height: normal;
            border: 0;
            overflow: hidden;

            .name {
                height: px2rem(32px);
                line-height: px2rem(32px);
                padding: px2rem(12px) 0 px2rem(30px);
                font-size: px2rem(22px);
                // background: #0F9CFF;
            }
            .icon {
                display: block;
                width: px2rem(90px);
                height: px2rem(90px);
                margin: 0 auto;
            }
            .icon.edit {
                background: url('images/svg/book/edit.svg') center no-repeat;
                background-size: 100% auto;
            }
            .icon.pdf {
                background: url('images/svg/book/pdf.svg') center no-repeat;
                background-size: 100% auto;
            }
            .icon.photo {
                background: url('images/svg/book/photo.svg') center no-repeat;
                background-size: 100% auto;
            }
            .icon.picture {
                background: url('images/svg/book/picture.svg') center no-repeat;
                background-size: 100% auto;
            }
            .icon.zfb {
                background: url('images/svg/book/zfb.svg') center no-repeat;
                background-size: 100% auto;
            }

        }
    }
    .ui-popup-close {
        position: absolute;
        width: 100%;
        height: px2rem(98px);
        line-height: px2rem(98px);
        text-align: center;
        bottom: 0;
        left: 0;
        right: 0;
        top: unset;
        background: 0;
        border: px2rem(2px) solid #EBEBEB;

        &:before {
            content: '取消';
            font-size: px2rem(30px);
            color: #0F9CFF;
        }
    }
}
.invoice-item {
    box-sizing: border-box;
    overflow: hidden;
    border: px2rem(2px) solid #EEEEEE;
    border-radius: px2rem(12px);

    .invoice-info {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding: px2rem(24px) px2rem(36px) px2rem(24px) px2rem(124px);
        border-radius: px2rem(12px);

        .icon {
            display: inline-block;
            position: absolute;
            left: px2rem(24px);
            top: px2rem(24px);
            width: px2rem(80px);
            height: px2rem(80px);

            img {
                width: 100%;
            }
        }
        .info {
            flex: 1;

            & > div {
                line-height: px2rem(40px);
                color: #ccc;
            }
            .type {
                line-height: px2rem(48px);
                color: #333;
                display: flex;
                justify-content: space-between;
            }
        }
        .not-subject-tip {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            display: none;
            background: #fbc4c4;
            padding: px2rem(8px) px2rem(30px);
            line-height: px2rem(32px);
            font-size: px2rem(20px);
            white-space: normal;
        }
        .select-text,
        input {
            display: none;
        }
    }
    .delete {
        width: px2rem(120px);
        height: 100%;
        line-height: 100%;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: red;
        color: #fff;
        cursor: pointer;
    }
    &.not-subject {
        .invoice-info {
            padding-bottom: px2rem(136px);
        }
        .not-subject-tip {
            display: block;
        }
    }
}
/*展开收起按钮*/

/*展开收起按钮*/
.ui-expand-btn {
    position: relative;
    height: px2rem(30px);
    font-size: px2rem(24px);
    color: #BBBFC4;
    line-height: px2rem(30px);
    text-align: center;
    
    &::after {
        content: ' ';
        display: inline-block;
        vertical-align: middle;
        width: px2rem(32px);
        height: px2rem(32px);
        margin-right: px2rem(10px);
        color: #BBBFC4;
        background: url('images/svg/expand-icon.svg') center no-repeat;
        background-size: 100% auto;
        transform: rotate(180deg);
        transition: all 0.2s linear;
    }

    &.expand::after {
        transform: rotate(0deg);
    }
}
.ui-expand-cont {

    & > .ui-expand-item,
    .more-item {
        display: none;
    }
    & > .ui-expand-item:first-child {
        display: block;
    }
     
    tbody {
        border-bottom: 0;
        tr:nth-child(3) {
            border-bottom: 0;
            td {
                border-bottom: 0;
            }
        }
    }
    &.expand {
        & > .ui-expand-item {
            display: block;
        }
        .more-item {
            display: table-row;
        }  
        tbody {
            tr:nth-child(3) {
                td {
                    border-bottom: px2rem(2px) solid #EAEEEF;
                }
            }
        } 
    }
}